<template>
	<view class="recent-visits-box">
		<text class="comp-title">最近访问</text>
		<view class="avatar-box">
			<view class="avatar-item" v-for="user of passiveList">
				<view class="avatar-img-box">
					<image class="avatar-img" :src="user.avatar"></image>
					<image class="sex-img" :src="user.sex === 0 ? '/static/portraitTagGirl-l.png' : '/static/portraitTagBoy-l.png'"></image>
				</view>
				<view class="name-text">{{ user.nickName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"recentVisits",
		data() {
			return {
				
			};
		},
		props: {
			passiveList: Array
		}
	}
</script>

<style lang="scss">
	.recent-visits-box {
		width: 100vw;
		padding: 40rpx 48rpx 20rpx 48rpx;
		
		.comp-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
		}
		
		.avatar-box {
			width: 100%;
			margin-top: 48rpx;
			
			.avatar-item {
				display: inline-block;
				margin-right: 38rpx;
				
				.avatar-img-box {
					width: 100rpx;
					height: 100rpx;
					position: relative;
					
					.avatar-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}
					
					.sex-img {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
				
				.name-text {
					width: 100rpx;
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #222222;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
				}
			}
		}
	}
</style>